import React from "react";
import "./RecommandInfo.scss";
import { useEffect, useState, useRef } from "react";
import { get_command_info } from "../../utils/api";
function RecommandInfo() {
  const [commandData, setCommandData] = useState();
  const [dataArr, setDateArr] = useState([]);
  useEffect(() => {
    async function getcommandData() {
      let data = await get_command_info();
      // console.log("获取推荐资讯数据", data);
      data.map((item) => {
        // console.log(item);
        dataArr.push(item.created_at.split(" ").slice(0, 1).join(","));
      });
      setCommandData(data);
    }
    getcommandData();
  }, []);
  console.log(dataArr);
  return (
    <div className="RecommandInfo">
      <div className="top">
        <span>推荐资讯</span>
        <i>查看更多&gt;</i>
      </div>
      <div className="info_con">
        {commandData &&
          commandData.slice(0, 3).map((item, i) => (
            <div className="item" key={item.id}>
              <div className="left">
                <img src={"https://ss.lanqb.com/" + item.imgCover} alt="" />
                <span>{item.category.category_name}</span>
              </div>
              <div className="right">
                <h4>{item.title}</h4>
                <p>
                  {dataArr && dataArr[i].split("-").slice(0, 1)}年
                  {dataArr && dataArr[i].split("-").slice(1, 2)}月
                  {dataArr && dataArr[i].split("-").slice(2, 3)}日
                </p>
              </div>
            </div>
          ))}
      </div>
    </div>
  );
}
export default RecommandInfo;
